<template>
	<view v-if="props.list && props.list.length > 0" class="cu-list menu-avatar">
		<view v-for="(item, index) in props.list" :key="index" :data-index="index" :data-value="item"
			@click="handleSelect" class="cu-item grayscale">
			<view class="cu-avatar round margin-left bg-red text-sm">{{getHead(item.name)}}</view>
			<view class="content">
				<view>
					<view class="text-cut">{{item.name}}</view>
					<text class="margin-left-xs text-sm">{{item.phone}}</text>
					<view class="cu-tag line-red sm">默认</view>
				</view>
				<view class="text-gray text-sm flex">
					<view class="text-cut">
						<text>{{item.province}}</text>
						<text class="margin-left-xs">{{item.city}}</text>
						<text class="margin-left-xs">{{item.district}}</text>
						<text class="margin-left-xs">{{item.address}}</text>
					</view>
				</view>
			</view>
			<view class="action">
				<text class="cuIcon-edit"></text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const emit = defineEmits(['action']);
	const props = defineProps({
		list: {
			default: function() {
				return [{
					district: '双流区',
					city: "成都市",
					province: "四川省",
					country: "中国",
					address: '关东一街1000号',
					name: '张三',
					phone: '18716643045'
				}]
			}
		},
		height: {
			type: String,
			default: '80vh'
		},
		load: {
			type: [Boolean, String],
			default: true
		}
	});
	const handleSelect = (e: any) => {
		emit('action', e.currentTarget.dataset.value);
	};
	const getHead = (e: string) => {
		return e.substring(0, 1)
	};
</script>

<style>
	.cu-item {
		margin-top: 0;
		border: 1px solid #efefef;
	}

	.cu-card>.cu-item {
		display: block;
		background-color: #ffffff;
		overflow: hidden;
		border-radius: 10rpx;
		margin: 0rpx 30rpx 30rpx 30rpx;
	}
</style>
